<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素内容只能修改一次</title>
</head>
<body>
<div id="change" class="change">
  <h1 data-once="info" style="background-color: red"></h1>
</div>

<script>
  let info = 'Hello, Vue'

  function execute_once(fn) {
    let times = true

    return function () {
      if (times) {
        times = false
        fn.apply(this.arguments)
      }
    }
  }

  function modify_element_content() {
    let element = document.querySelector("#change > h1");

    let attribute = element.getAttribute('data-once');
    element.innerText = eval(attribute)
  }

  let once = execute_once(modify_element_content);

  once()

  info = "Hello, World!"
  once()
  info = "Hello"
  once()

</script>
</body>
</html>